<template>
  <el-aside :width="collapse.collapse?'65px':'180px'">
    <h1 class="menu-title" v-show="!collapse.collapse">家庭收支管理系统</h1>
    <h1 class="menu-title" v-show="collapse.collapse" style="width: 65px;">
      <el-icon size="27px" color="#7287e2" style="margin-top: 16px;"><Management /></el-icon>
    </h1>
    <el-menu
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      :collapse="collapse.collapse"
      collapse-transition="false"
      :router="true"
    >
      <el-menu-item index="/plan">
        <el-icon><EditPen /></el-icon>
        <span>计划中心</span>
      </el-menu-item>

      <el-sub-menu>
        <template #title>
          <el-icon><List /></el-icon>
          <span>收支明细</span>
        </template>
        <el-menu-item index="/revexp">
          <el-icon><Search /></el-icon>
          <span>模糊查询</span>
        </el-menu-item>
        <el-menu-item index="/date">
          <el-icon><Sunny /></el-icon>
          <span>每日详情</span>
        </el-menu-item>
        <el-menu-item index="/category">
          <el-icon><Grid /></el-icon>
          <span>细类查找</span>
        </el-menu-item>
      </el-sub-menu>

      <el-menu-item index="/statement">
        <el-icon><Document /></el-icon>
        <span>财务报表</span>
      </el-menu-item>

      <el-menu-item index="/manage">
        <el-icon><Avatar /></el-icon>
        <span>成员管理</span>
      </el-menu-item>
    </el-menu>
  </el-aside>
</template>
<script setup>
import { ref } from "vue";
import { collapseStore } from '@/store';

const collapse = collapseStore();



</script>
<style>
.el-aside {
  height: 100vh;
  background: #545c64;
}
.menu-title {
  width: 180px;
  height: 60px;
  background-color: #545c64;
  color: #fff;
  font-weight: 700;
  text-align: center;
  line-height: 60px;
}
.icons {
  width: 16px;
  height: 16px;
}
.el-menu {
  border: none;
}
</style>